<template>
  <div class="clock">
    {{date}} {{time}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        date: '',
        time: '',
        week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
      };
    },
    mounted() {
      let timerID = setInterval(() => {
        this.updateTime()
      }, 1000);
      this.updateTime();
    },

    methods: {
      updateTime() {
        let _cd = new Date();
        this.time =
          `${this.zeroPadding(_cd.getHours(), 2)}:${this.zeroPadding(_cd.getMinutes(), 2)}:${this.zeroPadding(_cd.getSeconds(), 2)}`;
        this.date =
          `${this.zeroPadding(_cd.getFullYear(), 4)}-${this.zeroPadding(_cd.getMonth() + 1, 2)}-${this.zeroPadding(_cd.getDate(), 2)}`;
      },
      zeroPadding(num, digit) {
        let _zero = '';
        for (let i = 0; i < digit; i++) {
          _zero += 0;
        }
        return (_zero + num).slice(-digit);
      }
    },

    watch: {}

  }

</script>
<style lang='scss' scoped>
 /* @import '../scss/base.scss';*/

  .clock {
    display: inline-block;
    font-size: px2rem(14);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: px2rem(64);
  }

</style>
